<template>
  <div class="oe-stu-tickets" id="tickets" style="min-height: 650px;" v-loading="loading">
    <info-top class="no-print" :showExpend="true"></info-top>
    <div class="no-print" style="width:1200px;margin: 20px auto;">
      <top-tip :batchTitle="batchTitle"></top-tip>
    </div>
    <div class="dom-fa clearfix">
      <div class="stu-list no-print">
        <span style="padding: 0px 10px;">学生列表<label style="color:#0177D5;">({{stuList.length}})</label></span>
        <div class="oe-manage-search">
          <a-input-search placeholder="请输入姓名或学号" v-model="userName" @search="getSubList" />
        </div>
        <div class="stu-lis-box">
          <div
            class="stu-lis"
            v-for="(item, index) in stuList"
            :key="index"
            @click="getTicketInfo(index,item.Id)"
            :class="{ 'stu-lis-activate': item.Id == stuIdlis }"
          >
            <img :src="item.AvatorUrl || AvatorUrl" alt="照片" />
            <div class="stu-lis-content">
              <div>{{ item.DisplayName }}</div>
              <p>{{ item.userNo }}</p>
            </div>
          </div>
        </div>
        <div class="oe-print-btn">
          <a-button type="primary" @click="getPdfDom">
          导出
          </a-button>
          <a-button type="primary" style="margin-left: 10px;" v-print="'#prints'">
          打印
          </a-button>
          <a-button type="primary" style="margin-top: 10px;" @click="getSace">
            批量导出
          </a-button>
        </div>
      </div>
      <div id="prints">
        <div id="pdfDom">
          <div style="margin:20px">
            <a-row style="border: 1px solid #000;">
              <a-col :span='24' class="zkzc"><h2 class="zkz">准考证</h2></a-col>
              <a-col :span='20' height="150" style="font-weight: bold;">
                <div class="first-data">
                  <div class='list first-data-fix'><span>学号</span></div>
                  <div class='list'><span>{{ ticketInfo.UserNo }}</span></div>
                </div>
                <div class="first-data">
                  <div class='list first-data-fix'><span>姓名</span></div>
                  <div class='list'><span>{{ ticketInfo.DisplayName }}</span></div>
                </div>
                <div class="sex-data">
                  <div class='list first-data-fix'><span>性别</span></div>
                  <div class='list'><span>{{ ticketInfo.Sex }}</span></div>
                </div>
              </a-col>
              <a-col :span='4' class="img-col"><img :src="ticketInfo.AvatorUrl || AvatorUrl" width="100%" height="150" /></a-col>
              <a-col :span='24' class="batch-name"><div class="title">{{batchTitle}}</div></a-col>
              <a-col :span='9' class="title-col"><div class="title">日期</div></a-col>
              <a-col :span='6' class="title-col"><div class="title">考试名称</div></a-col>
              <a-col :span='3' class="title-col"><div class="title">考试地点</div></a-col>
              <a-col :span='3' class="title-col"><div class="title">考场</div></a-col>
              <a-col :span='3' style="display:flex;"><div class="title">座位</div></a-col>
            </a-row>
            <a-row 
              style="border-left: 1px solid #000;border-right: 1px solid #000;display:flex;" 
              v-for="(item, index) in ticketInfo.ExamList" 
              :key="index"
            >
              <a-col :span='9' class="data-list data-list-br"><div>{{ item.StartTime }}~{{item.EndTime}}</div></a-col>
              <a-col :span='6' class="data-list data-list-br"><div>{{item.Title}}</div></a-col>
              <a-col :span='3' class="data-list data-list-br"><div style="word-break: break-all;">{{item.Address}}</div></a-col>
              <a-col :span='3' class="data-list data-list-br"><div>{{item.ExamRoomName}}</div></a-col>
              <a-col :span='3' class="data-list"><div>{{item.SeatNumber}}</div></a-col>
            </a-row>
            <a-row style="border-left: 1px solid #000;border-right: 1px solid #000;border-bottom: 1px solid #000;" >
              <a-col :span='24' style="display:flex;"><p class="p_style">考生须知</p></a-col>
              <a-col :span='24'>
                <div class="align_left">
                  <div v-if="pdfShow" style="margin: 4px 11px;white-space:pre-wrap;">{{stuText}}</div>
                  <a-textarea 
                    v-else 
                    style="width: 100%;" 
                    v-model="stuText" 
                    placeholder="请输入考生须知" 
                    :auto-size="{ minRows: 6, maxRows: 1000 }"
                    maxlength="500"
                    @blur="leave()"
                  />
                  <div v-if="!pdfShow" class="word-num">{{stuText.length}}/500</div>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import printJS from 'print-js';
import infoTop from '@/components/info-top/index.vue';
import topTip from '@/components/top-tip/index.vue';
export default {
  name: 'stuTickets',
  components: {
    infoTop,
    topTip
  },
  data() {
    return {
      key:'',
      stuCount:'',
      stuList: [],
      ticketInfo: {},
      DisplayName: '',
      stuText: '',
      sex: '',
      userNo: '',
      id: '',
      title: '',
      startTime: '',
      endTime: '',
      address: '',
      examRoomName: '',
      seatNumber: '',
      seatNumberRepair: '',
      userName: '',
      loading: false,
      batchTitle: '',
      timeNum: 0,
      count: 0,
      stuIdlis: '',
      pdfShow: false,
      AvatorUrl: '/common/images/default_avatar.jpg'
    };
  },
  props: {
    batchid: {
      type: String,
      default: ''
    },
    examType: {
      type: Number,
      default: 0
    },
    num: {
      type: Number,
      default: 0
    },
  },  
  mounted() {
    this.getStuTickets();
  },
  methods: {
    printAction(val) {
      this.$emit('getBtnAction', val);
    },
    getTicketInfo(index,id){
      this.ticketInfo = this.stuList[index];
      this.stuIdlis = id;
    },
    getPdfDom() {
      window.scrollTo(0, 0);
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      this.pdfShow = true;
      var that = this;
      setTimeout(() => {
        this.getPdf(that.ticketInfo.DisplayName);
      }, 500);
    },
    getSace() {
      window.scrollTo(0, 0);
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0; 
      this.pdfShow = true;
      var that = this;
      this.ticketInfo = this.stuList[this.timeNum];
      setTimeout(() => {
        this.getPdf(that.ticketInfo.DisplayName);
        this.timeNum++
        this.savePdfBatch();
      }, 200);
      this.count++
    },
    leave(){
       this.loading = true;
      this.$http
        .post('/api/design/student/saveInstructions', {
          batchId: this.batchid,
          instructions: this.stuText
        })
        .then((rst) => {
          this.loading = false;
          let text = this;
          if (rst.code > 0) {
            text.$message.success(rst.msg);
          } else {
            text.$message.error(rst.msg);
          }
        });
    },
    savePdfBatch() {
      if (this.timeNum < this.stuList.length) {
        if (this.count == 11) {
          this.count = 0;
          setTimeout(() => {
            this.getSace();
          }, 200);
        }else {
           this.getSace();
        }
      } else {
        // window.loading();
        this.timeNum = 0;
        this.count = 0;
      }
    },
    //查看学生准考证
    getStuTickets() {
      this.loading = true;
      this.$http
        .post('/api/design/student/getAllStuListByBatchId', {
          batchId: this.batchid,
          examType: this.examType,
          name: this.DisplayName,
          key: this.userName
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.stuList = rst.list;
            this.stuIdlis = rst.list[this.num].Id;
            this.ticketInfo = rst.list[this.num];
            this.DisplayName = rst.DisplayName;
            this.userNo = rst.userNo;
            this.batchTitle = rst.batchName;
            this.stuText = rst.instructions;
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    getPrint() {
      this.$print(this.$refs.print)
    },
    getSubList() {
      this.getStuTickets()
    }
  }
};
</script>
